<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb/>
    </div>

    <div class="page-main">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header> 常见数据</template>

            <el-row :gutter="20">
              <el-col :span="6" v-for="(item, key) in state.detail" class="top-col">
                <top-card-other :title="item.name" :lists="item.lists"></top-card-other>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<script setup name="qualityAssessment-overview-index">
import {storeToRefs} from 'pinia';
import {useRoutesList} from '/@/stores/routesList';
import topCardOther from '/@/components/TopCard/topCardOther.vue';
import {assessmentApi} from '/@/api/dashbord/assessment'
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

// 定义变量内容
const stores = useRoutesList();
const state = reactive({
  detail: []
});

const getDetail = () => {
  assessmentApi().getMedicalDetail().then(res => {
    var data = res.data.commonData.forEach(item => {
      var t = {
        name: item.name,
        lists: [{title: item.count, name: ''}]
      }
      state.detail.push(t)
    })

  })
}
// 页面加载时
onMounted(() => {
  getDetail()
});
</script>

<style lang="scss" scoped>
:deep() .top-col {
  width: 20% !important;
  max-width: 20% !important;
}

:deep() .el-row:not(:first-child) {
  margin-top: 15px;
}
</style>
